import React from 'react'; // 导入 React 库
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; // 导入路由相关的组件
import { Provider } from 'react-redux'; // 导入 Redux 的 Provider 组件
import store from './store'; // 导入配置好的 Redux store
import RegisterForm from './components/form/implements/RegisterForm'; // 导入注册表单组件
import LoginForm from './components/form/implements/LoginForm'; // 导入登录表单组件
import AccountList from './components/AccountList'; // 导入账户列表组件
import PrivateRoute from './components/PrivateRoute'; // 导入私有路由组件

// 定义 App 组件，这是一个无参数的函数组件
const App: React.FC = () => {
  return (
    <Provider store={store}> {/* 使用 Provider 组件将 Redux store 传递给整个应用 */}
      <Router> {/* 使用 Router 组件设置应用的路由系统 */}
        <Routes> {/* 使用 Routes 组件包裹所有的 Route 组件 */}
          <Route path="/register" element={<RegisterForm />} /> {/* 当用户访问 /register 路径时，显示 RegisterForm 组件 */}
          <Route path="/login" element={<LoginForm />} /> {/* 当用户访问 /login 路径时，显示 LoginForm 组件 */}
          <Route path="/accounts" element={<PrivateRoute />}>
            <Route index element={<AccountList />} />
          </Route> {/* 当用户访问 /accounts 路径时，显示 AccountList 组件，但需要通过 PrivateRoute 进行权限验证 */}
          <Route path="/" element={<LoginForm />} /> {/* 当用户访问根路径 / 时，显示 LoginForm 组件 */}
        </Routes>
      </Router>
    </Provider>
  );
};

export default App; // 将 App 组件作为默认导出，以便在其他文件中导入和使用